<template>
	<view class="main-page">
		<u-navbar :placeholder="true" title="门店管理" :autoBack="true"></u-navbar>
		<u-gap height="14" ></u-gap>
		<view class="lists">
			<u-list @scrolltolower="scrolltolower" :height="listHeight">
				<u-list-item v-for="(item, index) in lists" :key="index" >
					<u-cell :title="item.store_name" arrow-direction="right" :isLink="true" @click.stop="showEditForm(item)">
						<view slot="label">
							<u--text mode="date" type="info" :text="item.create_time" size="12"></u--text>
						</view>
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<view class="btn-item fixed-btn-item">
			<u-button class="bg-linear-main" type="primary" shape="circle" text="添加门店" @tap="showModal = 'edit'"></u-button>
		</view>
		<u-popup :closeOnClickOverlay="true" :show="showModal == 'edit'" @close="showModal = ''">
			<view class="form">
				<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="auto" :labelStyle="{fontSize:'26rpx',fontWeight:600}">
					<u-form-item label="门店名称" prop="store_name" borderBottom>
						<u--input v-model="formData.store_name" border="none" placeholder="请输入门店名称" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<view class="btn-item">
						<u-button class="bg-linear-main" type="primary" shape="circle" text="确认" @tap="subForm"></u-button>
					</view>
				</u--form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { storeList, storeAdd, storeEdit } from '@/common/api.js';
	
	export default {
		data() {
			return {
				lists: [],
				limit: 20,
				page: 1,
				formData: {
					store_name: '',
					id: 0
				},
				listHeight: 0,
				rules: {
					'store_name': {type: 'string',required: true,message: '请输入门店名称',trigger: ['blur', 'change']}
				},
				showModal: ""
			}
		},
		onLoad() {
			const sys = uni.getSystemInfoSync();
			this.listHeight = sys.windowHeight - sys.statusBarHeight - 140;
			this.get_list();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			get_list(){
				storeList({limit:this.limit, page:this.page}).then(res => {
					console.log('res', res)
					this.lists = res.list
				})
			},
			showEditForm(data = null) {
				if(data){
					this.formData = {...data}
				} else {
					this.formData = {
						store_name: '',
						id: 0
					}
				}
				console.log(data, this.formData)
				this.showModal = 'edit';
			},
			subForm(){
				this.$refs.uForm.validate().then(res => {
					uni.showLoading();
					const method = this.formData.id ? storeEdit : storeAdd;
					method(this.formData).then(res => {
						uni.$u.toast('操作成功!');
						this.get_list();
						this.showModal = "";
						uni.hideLoading();
					}).catch(res => {
						uni.$u.toast('操作失败!');
						uni.hideLoading();
					})
				}).catch(errors => {
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form { padding: 25rpx; }
	.lists { background-color: #fff;  padding-bottom: 160rpx;}
	.fixed-btn-item { position: fixed; left: 0;right:0;bottom: 0; z-index: 1; }
	.btn-item { padding: 40rpx; }
</style>
